<template>
  <div class="usesale">
    <div class="block">
      <div class="top">206</div>
      <div class="middle"><dv-conical-column-chart :config="config1" style="width:150px;height:170px;" /></div>
      <div class="bottom">安全检查次数</div>
    </div>
    <div class="block">
      <div class="top">327</div>
      <div class="middle"><dv-conical-column-chart :config="config2" style="width:150px;height:170px;" /></div>
      <div class="bottom">发现隐患处</div>
    </div>
    <div class="block">
      <div class="top">100</div>
      <div class="middle"><dv-conical-column-chart :config="config3" style="width:150px;height:170px;" /></div>
      <div class="bottom">整改完成率</div>
    </div>
  </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import * as echarts from 'echarts'
const config1 = reactive({
  data: [
    {
      name: '',
      value: 206,
      
    },
  ],
  columnColor:"rgb(54, 220, 238,.5)"
})
const config2 = reactive({
  data: [
    {
      name: '',
      value: 327,
    },
  ],
  columnColor:"rgba(238, 232, 54, 0.5)"

})
const config3 = reactive({
  data: [
    {
      value: 100,
    },
  ],
  columnColor:"rgba(223, 105, 234, 0.5)"

})
</script>

<style lang="scss" scoped>
.usesale {
  margin-top: 5px;
  height: 90%;
  background-color: rgba(37, 62, 112, 0.5);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  display: flex;
  .block {
    height: 100%;
    flex: 1;
    padding-top: 8%;
    .top {
      height: 25%;
      font-size: 40px;
      text-align: center;
      font-weight: bold;
      background: linear-gradient(90deg, #4a5f78, #edf0f4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .middle {
      height: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .bottom {
      height: 20%;
      font-size: 24px;
      text-align: center;
      font-weight: bold;
      padding-top: 26px;
      color: #bcd0e7;
    }
  }
}
</style>
